<template>
  <div class="home">
   <div v-for="item of top250" :key="item._id" @click="handleClick(item._id)">
     <img :src="item.pic" alt="" class="pic">
     <p>{{item.title}}</p>
   </div>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import axios from 'axios'
export default {
  setup(){
    const state = reactive({
    top250:[],
    handleClick(id){
      console.log(id)
      this.$router.push(`/top/detail?id=${id}`)
    }
  })
  onMounted(()=>{
    axios.get("http://122.112.161.135:4000/api/movie/top250").then(res=>{
      console.log(res.data.res)
      state.top250 = res.data.res
    })
  })
  const refState = toRefs(state);
  return{
    ...refState
  }
  }
}
</script>
<style scoped>
.home{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.pic{
  width: 150px;
}
.home div{
  width: 150px;
  height: 240px;
  padding: 10px;
}
</style>


